﻿@{
    ViewBag.Title = "编辑自定义菜单";
}
<form id="form1" class="layui-form" url="MenuSave?id=@ViewBag.id">
    @Html.AntiForgeryToken()
    <!--导航栏-->
    <div class="pageheader">
        <div class="page-bar">
            <ul class="page-breadcrumb">
                <li><a href="../weixin/menu_list" class="back"><i class="fa fa-mail-reply-all"></i> 返回列表页</a></li>
                <li><a href="javascript:;"><i class="iconfont icon-home1"></i> 首页</a> </li>
                <li><a href="javascript:;">应用管理</a> </li>
                <li><a href="javascript:;">微信管理</a> </li>
                <li><a href="javascript:;">编辑自定义菜单</a> </li>
            </ul>
        </div>
    </div>
    <!--/导航栏-->
    <!--内容-->
    <div class="layui-fluid">
        <div class="layui-tab layui-tab-card">
            <ul class="layui-tab-title" id="floatHead">
                <li class="layui-this">自定义菜单</li>
                <li>使用说明</li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show">
                    <div class="layui-form-item">
                        <label class="layui-form-label">公众账户</label>
                        <div class="layui-input-block">
                            <select class="select" lay-filter="change" name="ddlAccountId" url="/webapi/weixinJson" selectValue="@ViewBag.id" promtion="请选择公众账户" datatype="*" errormsg="请选择公众账户！" sucmsg=" "><option value="">请选择公众账户...</option></select>
                            <span class="Validform_checktip">*当前的公众账户，可以切换。</span>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">一级菜单</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <thead>
                                        <tr>
                                            <th width="33.333%" colspan="2">第一列</th>
                                            <th width="33.333%" colspan="2">第二列</th>
                                            <th width="33.333%" colspan="2">第三列</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop1Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop2Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop3Name" value="" />
                                            </td>

                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop1Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop2Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop3Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop1Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop2Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtTop3Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">二级菜单NO.1</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu11Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu21Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu31Name" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu11Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu21Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu31Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu11Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu21Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu31Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">二级菜单NO.2</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu12Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu22Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu32Name" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu12Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu22Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu32Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu12Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu22Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu32Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">二级菜单NO.3</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu13Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu23Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu33Name" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu13Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu23Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu33Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu13Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu23Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu33Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">二级菜单NO.4</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu14Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu24Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu34Name" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu14Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu24Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu34Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu14Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu24Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu34Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">二级菜单NO.5</label>
                        <div class="layui-input-block">
                            <div class="table-container">
                                <table border="0" cellspacing="0" cellpadding="0" class="border-table" width="100%">
                                    <tbody>
                                        <tr class="td_c">
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu15Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu25Name" value="" />
                                            </td>
                                            <td width="10%">名称：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu35Name" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu15Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu25Key" value="" />
                                            </td>
                                            <td width="10%">KEY：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu35Key" value="" />
                                            </td>
                                        </tr>
                                        <tr class="td_c">
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu15Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu25Url" value="" />
                                            </td>
                                            <td width="10%">URL：</td>
                                            <td>
                                                <input type="text" class="input" name="txtMenu35Url" value="" />
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-tab-item">
                    <div class="layui-form-item">
                        <label class="layui-form-label">注意事项说明</label>
                        <div class="layui-input-block">
                            <p>1、自定义菜单最多包括3个一级菜单，每个一级菜单最多包含5个二级菜单。</p>
                            <p>2、一级菜单最多4个汉字，二级菜单最多7个汉字，多出来的部分将会以“...”代替。</p>
                            <p>3、创建自定义菜单后，由于微信客户端缓存，需要24小时微信客户端才会展现出来。测试时可以尝试取消关注公众账号后再次关注，则可以看到创建后的效果。</p>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">按钮类型说明</label>
                        <div class="layui-input-block">
                            <p><b>1、click：点击推事件</b></p>
                            <p>用户点击click类型按钮后，微信服务器会通过消息接口推送消息类型为event的结构给开发者（参考消息接口指南），并且带上按钮中开发者填写的key值，开发者可以通过自定义的key值与用户进行交互；
                            <p><b>2、view：跳转URL</b></p>
                            <p>用户点击view类型按钮后，微信客户端将会打开开发者在按钮中填写的网页URL，可与网页授权获取用户基本信息接口结合，获得用户基本信息。</p>
                            <p><b>3、scancode_push：扫码推事件</b></p>
                            <p>用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后显示扫描结果（如果是URL，将进入URL），且会将扫码的结果传给开发者，开发者可以下发消息。</p>
                            <p><b>4、scancode_waitmsg：扫码推事件且弹出“消息接收中”提示框</b></p>
                            <p>用户点击按钮后，微信客户端将调起扫一扫工具，完成扫码操作后，将扫码的结果传给开发者，同时收起扫一扫工具，然后弹出“消息接收中”提示框，随后可能会收到开发者下发的消息。</p>
                            <p><b>5、pic_sysphoto：弹出系统拍照发图</b></p>
                            <p>用户点击按钮后，微信客户端将调起系统相机，完成拍照操作后，会将拍摄的相片发送给开发者，并推送事件给开发者，同时收起系统相机，随后可能会收到开发者下发的消息。</p>
                            <p><b>6、pic_photo_or_album：弹出拍照或者相册发图</b></p>
                            <p>用户点击按钮后，微信客户端将弹出选择器供用户选择“拍照”或者“从手机相册选择”。用户选择后即走其他两种流程。</p>
                            <p><b>7、pic_weixin：弹出微信相册发图器</b></p>
                            <p>用户点击按钮后，微信客户端将调起微信相册，完成选择操作后，将选择的相片发送给开发者的服务器，并推送事件给开发者，同时收起相册，随后可能会收到开发者下发的消息。</p>
                            <p><b>8、location_select：弹出地理位置选择器</b></p>
                            <p>用户点击按钮后，微信客户端将调起地理位置选择工具，完成选择操作后，将选择的地理位置发送给开发者的服务器，同时收起位置选择工具，随后可能会收到开发者下发的消息。</p>
                            <p><b>9、media_id：下发消息（除文本消息）</b></p>
                            <p>用户点击media_id类型按钮后，微信服务器会将开发者填写的永久素材id对应的素材下发给用户，永久素材类型可以是图片、音频、视频、图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。</p>
                            <p><b>10、view_limited：跳转图文消息URL</b></p>
                            <p>用户点击view_limited类型按钮后，微信客户端将打开开发者在按钮中填写的永久素材id对应的图文消息URL，永久素材类型只支持图文消息。请注意：永久素材id必须是在“素材管理/新增永久素材”接口上传后获得的合法id。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--/内容-->
    <!--工具栏-->
    <div class="page-footer">
        <div class="btn-wrap">
            <button class="layui-btn icon-btn" id="btnSubmit"><i class="layui-icon layui-icon-ok"></i>提交保存</button>
            <input name="btnReturn" type="button" value="返回上一页" class="layui-btn layui-btn-warm" onclick="javascript: history.back(-1);" />
        </div>
    </div>
    <!--/工具栏-->
</form>
@section Scripts{
    <script type="text/javascript">
        layui.use(['validform','jqueryform', 'element', 'form', 'cascadeSelect'], function () {
            var form = layui.form, cascadeSelect = layui.cascadeSelect, $ = layui.jquery;
            cascadeSelect.init('ddlAccountId', false);
            //初始化表单验证
            $("#form1").initValidform('#btnSubmit', 1);
            form.on('select(change)', function (data) {
                document.location = "menu_edit?id=" + data.value;
            });
            getmenu();
            function getmenu() {
                $.ajax({
                    type: "get",
                    url: "GetMenu?id=@ViewBag.id",
                    dataType: "json",
                    success: function (res) {
                        if (res.status == 0) {
                            return layer.msg(res.msg);
                        }
                        if (res.msg.menu) {
                            var buttons = res.msg.menu.button;
                            for (var i = 0; i < buttons.length; i++) {//此处i与j和页面中反转
                                var button = buttons[i];
                                $('input[name=txtTop' + (i + 1) + 'Name]').val(button.name);
                                $('input[name=txtTop' + (i + 1) + 'Key]').val(button.key);
                                $('input[name=txtTop' + (i + 1) + 'Url]').val(button.url);
                                if (button.sub_button && button.sub_button.length > 0) {//二级菜单
                                    for (var j = 0; j < button.sub_button.length; j++) {
                                        var subButton = button.sub_button[j];
                                        $('input[name=txtMenu' + (i + 1) + '' + (j + 1) + 'Name]').val(subButton.name);
                                        $('input[name=txtMenu' + (i + 1) + '' + (j + 1) + 'Key]').val(subButton.key);
                                        $('input[name=txtMenu' + (i + 1) + '' + (j + 1) + 'Url]').val(subButton.url);
                                    }
                                } else {

                                }
                            }
                        }
                        layer.msg("菜单获取已完成！");
                    }
                })
            }
        });
    </script>
}